<template>
	<div class="flx-row-bw-c nav-main-area">
		<div class="flx-row-s-c left-nav-area">
			<a href="/?r=123453" class="logo"></a>
			<div class="center-area flx-row-bw-c">
				<ul class="header-menu">
					<li>
						<a href="/dnreg">
							<span class="title">域名注册</span>
						</a>
					</li>
					<li class="menu2">
						<a href="/booking">
							<span class="title">域名预订</span>
						</a>
						<div class="drop-nav">
							<div class="drop-card">
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/booking">域名预订</a>
												</div>
												<div class="drop-desc">查看可预订的域名</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/mybookings">我的预订</a></div>
												<div class="drop-desc">查看已预订的域名</div>
											</div>
										</div>
									</li>
								</ul>
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/batchbooking">批量预订</a></div>
												<div class="drop-desc">一次性预订多条域名</div>
											</div>
										</div>
									</li>
<!--									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/reminder">预订提醒</a></div>
												<div class="drop-desc">快速捕捉想要的域名</div>
											</div>
										</div>
									</li>-->
								</ul>
							</div>
						</div>
					</li>
					<li class="menu3">
						<a href="/bidding">
							<span class="title">域名竞价</span>
						</a>
						<div class="drop-nav">
							<div class="drop-card">
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/bidding">域名竞价</a>
												</div>
												<div class="drop-desc">查看竞价中的域名</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/mywinnings">我的得标</a></div>
												<div class="drop-desc">快速查看得标情况</div>
											</div>
										</div>
									</li>
								</ul>
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/mybiddings">我的竞价</a></div>
												<div class="drop-desc">实时监控竞价状态</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="/buyoutprice">
							<span class="title">一口价</span>
						</a>
						<div class="drop-nav">
							<div class="drop-card">
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/dnsell">出售域名</a></div>
												<div class="drop-desc">我要卖域名</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/user/mybopdn">发布的一口价</a></div>
												<div class="drop-desc">我发布的一口价域名</div>
											</div>
										</div>
									</li>
								</ul>
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a href="/buyoutprice">一口价域名列表</a></div>
												<div class="drop-desc">可一口价购买的域名</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="/news">
							<span class="title">活动资讯</span>
						</a>
						<div class="drop-nav">
							<div class="drop-card">
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a
														href="/news?typeId=19&kw=&page=1&limit=10">域名百科</a></div>
												<div class="drop-desc">了解域名知识，轻松掌握域名世界</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a
														href="/news?typeId=18&kw=&page=1&limit=10">媒体报道</a></div>
												<div class="drop-desc">跟踪媒体报道，获取最新资讯</div>
											</div>
										</div>
									</li>
								</ul>
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a
														href="/news?typeId=6&kw=&page=1&limit=10">官方公告</a></div>
												<div class="drop-desc">190官方公告，获取最新重要信息</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title"><a
														href="/news?typeId=5&kw=&page=1&limit=10">交易爆料</a></div>
												<div class="drop-desc">关注最新爆料，掌握市场行情，洞悉交易动向</div>
											</div>
										</div>
									</li>
								</ul>
                <ul class="drop-list">
                  <li>
                    <div class="drop-box">
                      <div class="drop-hd">
                        <div class="drop-title"><a
                            href="/news?typeId=4&kw=&page=1&limit=10">企业域名</a></div>
                        <div class="drop-desc">了解品牌背后的域名策略与价值</div>
                      </div>
                    </div>
                  </li>
                </ul>
							</div>
						</div>
					</li>
					<li>
						<a href="/user">
							<span class="title">管理中心</span>
						</a>
						<div class="drop-nav">
							<div class="drop-card">
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title">
													<a href="/user/mydn">域名管理</a>
													<span class="arrow"></span>
												</div>
											</div>
											<div class="drop-bd">
												<div class="drop-row">
                          <div class="drop-col"><a href="/user/mydn">我的域名</a></div>
                          <div class="drop-col"><a href="/user/template">模板管理</a></div>
                          <div class="drop-col"><a href="/user/transferout">域名转出</a></div>
                          <div class="drop-col"><a href="/user/transferin">域名转入</a></div>
                          <div class="drop-col"><a href="/user/dnPush">域名PUSH</a></div>
                          <div class="drop-col"><a href="/user/myorder">域名订单</a></div>
                          <div class="drop-col"><a href="/user/batchanalysis">批量解析</a></div>
                          <div class="drop-col"><a href="/user/batchDns">DNS设置</a></div>
												</div>
											</div>
										</div>
									</li>
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title">
													<a href="/user/dnsell">我是卖家</a>
													<span class="arrow"></span>
												</div>
											</div>
											<div class="drop-bd">
												<div class="drop-row">
                          <div class="drop-col"><a href="/user/dnsell">出售域名</a></div>
                          <div class="drop-col"><a href="/user/release">释放域名</a></div>
                          <div class="drop-col"><a href="/user/mybopdn">发布的一口价</a></div>
												</div>
											</div>
										</div>
									</li>
                  <li>
                    <div class="drop-box">
                      <div class="drop-hd">
                        <div class="drop-title">
                          <a href="/user/successbop">我是买家</a>
                          <span class="arrow"></span>
                        </div>
                      </div>
                      <div class="drop-bd">
                        <div class="drop-row">
                          <div class="drop-col"><a href="/user/entrust">我的委托</a></div>
                          <div class="drop-col"><a href="/user/successbop">购买的一口价</a></div>
                        </div>
                      </div>
                    </div>
                  </li>
								</ul>
								<ul class="drop-list">
									<li>
										<div class="drop-box">
											<div class="drop-hd">
												<div class="drop-title">
													<a href="/user/mybookings">域名预订</a>
													<span class="arrow"></span>
												</div>
											</div>
											<div class="drop-bd">
												<div class="drop-row">
                          <div class="drop-col"><a href="/booking">预订域名</a></div>
                          <div class="drop-col"><a href="/batchbooking">批量预订</a></div>
                          <div class="drop-col"><a href="/user/mybookings">我的预订</a></div>
												</div>
											</div>
										</div>
									</li>
                  <li>
                    <div class="drop-box">
                      <div class="drop-hd">
                        <div class="drop-title">
                          <a href="/user/mybiddings">域名竞价</a>
                          <span class="arrow"></span>
                        </div>
                      </div>
                      <div class="drop-bd">
                        <div class="drop-row">
                          <div class="drop-col"><a href="/bidding">竞价域名</a></div>
                          <div class="drop-col"><a href="/user/mybiddings">我的竞价</a></div>
                          <div class="drop-col"><a href="/user/mywinnings">我的得标</a></div>
                        </div>
                      </div>
                    </div>
                  </li>
								</ul>
                <ul class="drop-list">
                  <li>
                    <div class="drop-box">
                      <div class="drop-hd">
                        <div class="drop-title">
                          <a href="/user/account">财务管理</a>
                          <span class="arrow"></span>
                        </div>
                      </div>
                      <div class="drop-bd">
                        <div class="drop-row">
                          <div class="drop-col"><a href="/user/account">账户信息</a></div>
                          <div class="drop-col"><a href="/user/discount">折扣统计</a></div>
                          <div class="drop-col"><a href="/user/capitaldetails">资金明细</a></div>
                          <div class="drop-col"><a href="/user/invoice">发票管理</a></div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="drop-box">
                      <div class="drop-hd">
                        <div class="drop-title">
                          <a href="/user/personalData">账户管理</a>
                          <span class="arrow"></span>
                        </div>
                      </div>
                      <div class="drop-bd">
                        <div class="drop-row">
                          <div class="drop-col"><a href="/user/personalData">个人资料</a></div>
                          <div class="drop-col"><a href="/user/security">安全中心</a></div>
                          <div class="drop-col"><a href="/user/certification">我的认证</a></div>
                          <div class="drop-col"><a href="/user/noticeSetting">通知设置</a></div>
                          <div class="drop-col"><a href="/user/mail">站内信</a></div>
                          <div class="drop-col"><a href="/user/securitylog">登录日志</a></div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
							</div>
						</div>
					</li>
				</ul>
				<!-- <template v-for="(item, index) in navList">
          <div class="item flx-row-s-c"
            :class="active == index ? 'active' : ''"
            :key="index"
            @click="toPage(item.to)"
            v-if="showUser || index != 6"
          >
            <div class="item-img" :class="'i-' + index"></div>
            <div
              class="item-font flx-row-s-c"
              :class="{ 'item-active': active == index }"
            >
              <span>{{ item.name }}</span>
            </div>
            <div
              class="user-nav-area"
              v-if="item.list && item.list.length > 0"
              :class="'user-nav-area-' + index"
            >
              <user-nav-box :other="true" :showUser="showUser"></user-nav-box>
            </div>
          </div>
        </template> -->
			</div>
		</div>
		<div>
			<div class="flx-row-s-c">
				<div class="search-box" @click="showSearch">
					<div class="search-icon"><img :src="require('_a/images/search.png')" alt="" /></div>
					<div class="search-input">
						搜索
					</div>
				</div>
				<!-- <div class="whois-btn flx-row-c-c pub-m-r-20" @click="toWhios">
					<span>查Whois</span>
					<img :src="require('_a/images/search@2x.png')" alt="" />
				</div> -->
				<!-- 未登录 -->
				<template v-if="!$store.state.user.token">
					<div class="flx-row-s-c pub-m-l-20" style="cursor: pointer" @click="toCart">
						<img class="cart-img" :src="require('_a/images/n-cart.png')" alt="" @click="toCart" />
					</div>
					<div class="flx-row-s-c mail-img-box" style="cursor: pointer" @click="toMail">
						<img class="mail-img" :src="require('_a/images/n-site.png')" alt="" />
						<!-- <p class="mail-num">{{$store.state.user.siteCount}}</p> -->
					</div>
					<div class="avatar-area flx-row-s-c pub-m-l-20" style="cursor: pointer">
						<img class="head-img" :src="require('_a/images/n-user-no.png')" alt="" />
						<div class="user-box-area">
							<div class="login-area flx-col-c-c">
								<a class="login-link" href="/login" @click="toLogin">用户登录</a>
								<a class="login-link pub-m-t-34" href="/login/re">免费注册</a>
							</div>
						</div>
					</div>
				</template>
				<!-- 登录 -->
				<template v-else>
					<div class="flx-row-s-c cart-img-box" style="cursor: pointer" @click="toCart">
						<img class="cart-img" :src="require('_a/images/n-cart.png')" alt="" />
						<p class="cart-num" v-if='$store.state.user.shoppingCartCount > 0'>
							{{ $store.state.user.shoppingCartCount>99 ? "99+" :$store.state.user.shoppingCartCount }}
						</p>
					</div>
					<div class="flx-row-s-c mail-img-box" style="cursor: pointer" @click="toMail">
						<img class="mail-img" :src="require('_a/images/n-site.png')" alt="" />
						<p class="mail-num" v-if='$store.state.user.siteCount > 0'>
							{{ $store.state.user.siteCount > 99 ? "99+" : $store.state.user.siteCount}}
						</p>
					</div>
					<div class="avatar-area flx-row-s-c">
            <div class="user-info flx-row-s-c"  @click.stop="goUser">
              <img class="head-img" :src="require('_a/images/n-user-no.png')" alt="" />
              <span class="f-14 c-o userName" style="margin-right: 10px">{{ $store.state.user.replaceName }}</span>
            </div>
						<div class="user-box-area">
							<user-box :other="true"></user-box>
						</div>
					</div>
				</template>
			</div>
		</div>
		<!-- 搜索 -->
		<Modal v-model="show" :width="1300" title="搜索" class-name="search-modal" :mask-closable="false"
			:footer-hide="true" :styles="{top: '80px'}">
			<div class="search-content">
				<div class="search-select">
					<Select v-model="type" size="large">
						<Option :value="0" label="批量查询"></Option>
						<Option :value="1" label="whois查询"></Option>
					</Select>
				</div>
				<div class="search-main">
					<div class="search-inner">
						<div class="search-prefix">
							<img :src="require('_a/images/search.png')" alt="" />
						</div>
						<Input type="text" placeholder="输入您想要的域名" v-model="keyword" @keyup.enter="searchEnter"></Input>
						<div class="search-suffix" @click="searchEnter">搜索</div>
					</div>
					<div class="search-history">
						<div class="search-label">搜索历史:</div>
            <div class="search-key" v-if="historyList.length === 0">
              <a>无</a>
            </div>
						<div class="search-key" v-else v-for="(item,index) in historyList" :key="index">
							<a @click="historySearch(item)">{{item}}</a>
              <span v-if="index < historyList.length - 1">|</span>
						</div>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	const navNormal = [{
			name: "首页",
			to: "/",
			hot: false,
		},
		{
			name: "域名注册",
			to: "/dnreg",
		},
		{
			name: "域名预订",
			to: "/booking",
			list: [{
					name: "预订域名",
					to: "/booking",
				},
				{
					name: "批量预订",
					to: "/batchbooking",
				},
				{
					name: "我的预订",
					other: true,
					to: "/user/mybookings",
				},
				{
					name: "预订提醒",
					other: true,
					to: "/user/reminder",
				},
			],
		},
		{
			name: "域名竞价",
			to: "/bidding",
			list: [{
					name: "竞价域名",
					to: "/bidding",
				},
				{
					name: "我参与的竞价",
					other: true,
					to: "/user/mybiddings",
				},
				{
					name: "待支付的竞价",
					other: true,
					to: "/user/mywinnings",
				},
			],
		},
		{
			name: "一口价",
			to: "/buyoutprice",
			list: [{
					name: "出售中的域名",
					to: "/buyoutprice",
				},
				{
					name: "我出售的域名",
					to: "#",
				},
				{
					name: "出售域名",
					to: "#",
				},
			],
		},
		// {
		//   name: "域名中介",
		//   to: "/dnpa",
		//   list: [
		//     {
		//       name: "委托代购",
		//       to: "/dnpa",
		//     },
		//     {
		//       name: "我的委托记录",
		//       to: "#",
		//     },
		//   ],
		// },
		{
			name: "新闻资讯",
			to: "/news",
			list: [{
					name: "官方公告",
					to: "/news?typeId=6&page=1&limit=10",
					other: true,
				},
				{
					name: "交易爆料",
					to: "/news?typeId=5&page=1&limit=10",
					other: true,
				},
				{
					name: "企业域名",
					to: "/news?typeId=4&page=1&limit=10",
					other: true,
				},
				{
					name: "媒体报道",
					to: "/news?typeId=18&page=1&limit=10",
					other: true,
				},
				{
					name: "域名百科",
					to: "/news?typeId=19&page=1&limit=10",
					other: true,
				},
			],
		},
		{
			name: "管理中心",
			other: true,
			to: "/user",
			list: [{
					name: "超级无敌",
					to: "#",
				},
				{
					name: "超级无敌厉害",
					to: "#",
				},
				{
					name: "红红火火恍恍惚惚",
					to: "#",
				},
			],
		},
	];

	import {
		changelocation
	} from "@/utils/location.js";
	export default {
		name: "VipNavigater",
		components: {
			userNavBox: () => import("_c/navBox/userNavBox.vue"),
			userBox: () => import("_c/navBox/useBox.vue"),
		},
		data() {
			return {
				active: 0,
				innerWidth: 0,
				showUser: true, // 是否显示用户中心
				type: 0,
				isAccurate: false,
				show: false,
				keyword: '',
        historyList: []
			};
		},
		watch: {
			$route: {
				immediate: true,
				deep: true,
				handler(newValue) {
					// this.active = newValue.meta.navIndex;
					this.navList.map((item, index) => {
						if (newValue.path == item.to) {
							this.active = index
						}
					})
				},
			},
			innerWidth: {
				immediate: true,
				deep: true,
				handler(newValue) {
					if (newValue < 1440) {
						this.showUser = false;
					} else {
						this.showUser = true;
					}
				},
			},
		},
		created() {},
		mounted() {
			// 当前设备宽度
			this.innerWidth = window.innerWidth;
			window.onresize = () => {
				return (() => {
					this.innerWidth = window.innerWidth;
				})();
			};
			if (this.innerWidth < 1440) {
				this.showUser = false;
			} else {
				this.showUser = true;
			}
		},
		methods: {
      showSearch() {
        this.show = true
        this.keyword = ''
        this.getHistoryList()
      },
      getHistoryList() {
        if (localStorage.getItem('history')) {
          this.historyList = JSON.parse(localStorage.getItem('history'))
        }
      },
      historySearch(item) {
        this.show = false
        let str = item.replace(/\n/g, '%0A');
        window.open(`/search?type=${this.type}&domainName=${str}`)
      },
			toPage(to) {
				if (to == this.$route.path) {
					this.$router.go(0);
				} else {
					window.location.href = to;
				}
			},
			// whois查询
			toWhios() {
				if (this.$route.name === "whoisSearch") {
					return false;
				}
				window.location.href = changelocation("/whoisSearch");
			},
			// 去购物车
			toCart() {
				let url = changelocation("/cart");
				window.open(url);
			},
			toMail() {
				this.$router.push('/user/mail')
			},
			goUser() {
				window.location.href = "/user";
			},
			toLogin() {
				if (this.$route.name != "login" && this.$route.name != "register") {
					this.$storage.setToLoginRoute(this.$route.fullPath);
				}
			},
      handleHistory(arr) {
        let str = arr.join("\n")
        if (this.historyList.indexOf(str) > -1) {
          return
        }
        if (this.historyList.length < 5) {
          this.historyList.push(str)
          localStorage.setItem('history', JSON.stringify(this.historyList))
        }else{
          this.historyList.splice(0,1)
          this.historyList.push(str)
          localStorage.setItem('history', JSON.stringify(this.historyList))
        }
      },
      searchEnter() {
        // 控制一下，如果用户没输入东西就不去搜索
        if (this.keyword == "") {
          return this.$Message.warning('请输入您想要的域名!');
        } else {
          this.show = false
          let str = this.keyword.replace(/\n/g, '%0A');
          window.open(`/search?type=${this.type}&domainName=${str}`)
          this.handleHistory([this.keyword])
          this.keyword = ''
        }
      },
		},
		computed: {
			...mapGetters(["getLogoLink"]),
			navList() {
				return navNormal;
			},
		},
		destroyed() {
			window.onresize = null;
		},
	};
</script>

<style lang="scss" scoped>
	.nav-main-area {
		width: 100%;
		height: 80px;
		padding: 0 20px;
		background: #fff;
		position: relative;
		min-width: 1200px;
		box-sizing: border-box;
	}

	.logo {
		display: inline-block;
		background-image: url("~_a/images/logo.png");
		@include size(72px, 45px);
		@include bg-setting(null, 72px 45px, left);
		overflow: hidden;
		flex-shrink: 0;
	}

	.item {
		height: 63px;
		font-size: 14px;
		color: #000;
		cursor: pointer;
		flex-shrink: 0;

		padding: 0 14px;

		.item-active {
			color: $mainColor !important;
		}

		.item-img {
			@include size(30px);
			margin-right: 5px;
			@include bg-setting(null, 30px 30px, center);

			&.i-0 {
				background-image: url("~_a/images/t0@2x.png");
			}

			&.i-1 {
				background-image: url("~_a/images/t1@2x.png");
			}

			&.i-2 {
				background-image: url("~_a/images/t2@2x.png");
			}

			&.i-3 {
				background-image: url("~_a/images/t3@2x.png");
			}

			&.i-4 {
				background-image: url("~_a/images/t4@2x.png");
			}

			&.i-5 {
				background-image: url("~_a/images/t5@2x.png");
				@include bg-setting(null, 21px 21px, center);
			}

			&.i-6 {
				background-image: url("~_a/images/t6@2x.png");
				// @include bg-setting(null, 21px 21px, center);
			}

			&.i-7 {
				background-image: url("~_a/images/t7@2x.png");
			}
		}

		.item-font {
			position: relative;
			color: #000;
			cursor: pointer;
			text-decoration: none;
		}

		&:hover .item-font {
			color: $mainColor;
		}

		&.active,
		&:hover {
			.i-0 {
				background-image: url("~_a/images/t0-y@2x.png");
			}

			.i-1 {
				background-image: url("~_a/images/t1-y@2x.png");
			}

			.i-2 {
				background-image: url("~_a/images/t2-y@2x.png");
			}

			/deep/ .user-nav-area-2 .list-area-item-2 {
				background: #fff;
			}

			.i-3 {
				background-image: url("~_a/images/t3-y@2x.png");
			}

			/deep/ .user-nav-area-3 .list-area-item-3 {
				background: #fff;
			}

			.i-4 {
				background-image: url("~_a/images/t4-y@2x.png");
			}

			/deep/ .user-nav-area-4 .list-area-item-4 {
				background: #fff;
			}

			.i-5 {
				background-image: url("~_a/images/t5-y@2x.png");
				@include bg-setting(null, 21px 21px, center);
			}

			/deep/ .user-nav-area-5 .list-area-item-5 {
				background: #fff;
			}

			.i-6 {
				background-image: url("~_a/images/t6-y@2x.png");
				// @include bg-setting(null, 21px 21px, center);
			}

			/deep/ .user-nav-area-6 .list-area-item-6 {
				background: #fff;
				// padding: 40px 0 16px;
			}

			.i-7 {
				background-image: url("~_a/images/t7-y@2x.png");
			}

			/deep/ .user-nav-area-7 .list-area-item-7 {
				background: #fff;
			}
		}

		&:hover .down-icon {
			@include bg-setting("o-down");
		}

		.user-nav-area {
			transform: translate(0, 10px);
			width: 100%;
			position: absolute;
			top: 60px;
			left: 0;
			font-size: 12px;
			line-height: 40px;
			box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
			z-index: -1;
			opacity: 0;
			transition: all 0.5s;
		}

		&:hover .user-nav-area {
			transform: translate(0, 0);
			z-index: 10;
			opacity: 1;
		}
	}

	.whois-btn {
		background: $mainColor;
		color: #fff;
		cursor: pointer;
		@include size(100px, 37px);
		border-radius: 3px;

		img {
			@include size(14px);
			margin-left: 10px;
		}
	}

	.cart-img-box {
		position: relative;
		margin-left: 22px;

		.cart-num {
			box-sizing: border-box;
			min-width: 18px;
			padding: 0 5px;
			height: 18px;
			border-radius: 9px;
			color: #fff;
			font-size: 12px;
			background: #F9521f;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: -5px;
			left: 20px;
		}
	}

	.mail-img-box {
		position: relative;
		margin-left: 22px;

		// .mail-img {
		// 	@include size(26px);
		// }

		.mail-num {
			box-sizing: border-box;
			min-width: 18px;
			padding: 0 5px;
			height: 18px;
			border-radius: 9px;
			color: #fff;
			font-size: 12px;
			background: #F9521f;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: -5px;
			left: 19px;
		}
	}


	// .cart-img,
	// .head-img {
	// 	@include size(30px);
	// }

	.head-login-img {
		@include size(32px);
		border: 2px solid $mainColor;
		border-radius: 50%;
	}

	.avatar-area {
		position: relative;
		height: 80px;
		margin-left: 20px;

		&:hover .user-box-area {
			transform: translateY(0);
			z-index: 5;
			opacity: 1;
		}

		.user-box-area {
			position: absolute;
			right: 0;
			top: 80px;
			transform: translateY(10px);
			box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
			z-index: -1;
			opacity: 0;
			transition: all 0.5s;

			.login-area {
				@include size(140px, 118px);
				background: #fff;
				font-size: 16px;
				border-radius: 8px;

				.login-link {
					color: #000;

					&:hover {
						color: $mainColor;
					}
				}
			}
		}

		.userName {
			display: inline-block;
			max-width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	.header-menu {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin-left: 36px;
	}

	.header-menu>li {
		margin-right: 40px;
		height: 100%;
	}

	.header-menu>li>a {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
	}

	li {
		list-style: none;
	}

	.header-menu li a .title {
		color: #666666;
		font-size: 16px;
		letter-spacing: 2px;
	}

	.header-menu li.active a .title,
	.header-menu li:hover a .title {
		color: #000000;
	}


	.drop-nav {
		width: 100%;
		box-sizing: border-box;
		transform: translate(0, 10px);
		min-width: 1300px;
		position: absolute;
		top: 80px;
		left: 0;
		z-index: -1;
		visibility: hidden;
		opacity: 0;
		transition: all 0.2s;
	}

	.header-menu>li:hover .drop-nav {
		transform: translate(0, 0);
		z-index: 5;
		opacity: 1;
		visibility: visible;
	}

	.drop-card {
		width: 1300px;
		min-height: 334px;
		padding: 30px 50px 20px;
		margin: 0 auto;
		background-color: #fff;
		background-image: url('"~_a/images/drop-bg.png');
		background-repeat: no-repeat;
		background-position: left bottom;
		border-radius: 0 0 3px 3px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.header-menu>li:hover .drop-card {
		margin-left: auto;
	}

	.header-menu>li.menu2:hover .drop-card {
		margin-left: 240px;
	}

	.header-menu>li.menu3:hover .drop-card {
		margin-left: 352px;
	}

	.drop-list {
		width: 25%;
		position: relative;
	}

	.drop-list li {
		padding: 10px;
	}


	.drop-box {
		border-radius: 8px;
		background: linear-gradient(360deg, #FDFDFF 0%, #FFF8ED 68.04%);
		border: 1px solid #FFFFFF;
		box-shadow: 0px 4px 20px 0px #FFEBCEDB;
		/* height: 160px; */
		padding: 10px 10px 10px 30px;
		position: relative;
	}

	.drop-box::before {
		position: absolute;
		content: '';
		left: 15px;
		top: 18px;
		width: 4px;
		height: 4px;
		background-color: #F68A0C;
		border-radius: 50%;
	}

	.drop-title {
		position: relative;
	}

	.drop-title a {
		color: #333333;
		font-size: 16px;
	}

	.drop-title a:hover {
		color: #F68A0C;
	}

	.drop-title .arrow {
		position: absolute;
		display: block;
		right: 0;
		top: 6px;
		width: 8px;
		height: 8px;
		transition: all .3s;
		border-left: 1px solid #666666;
		border-bottom: 1px solid #666666;
		transform: rotate(-45deg);
	}


	.drop-desc {
		color: #666666;
		font-size: 14px;
		margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	}

	.drop-bd {
		border-top: 1px solid #6666661A;
		padding-top: 8px;
		/* min-height: 72px; */
		margin-top: 10px;
		display: none;
	}

	.drop-row {
		display: flex;
		flex-wrap: wrap;
	}

	.drop-col {
		width: 33.33%;
	}

	.drop-bd a {
		color: #666666;
		margin-top: 8px;
		font-size: 13px;
	}

	.drop-bd a:hover {
		color: #F68A0C;
	}

	.drop-box:hover .drop-title a {
		color: #F68A0C;
	}

	.drop-box:hover .drop-title .arrow {
		transform: rotate(-135deg)
	}

	.drop-box:hover .drop-bd {
		display: block;
	}

	.search-box {
		background-color: #FFF2E2;
		border-radius: 7px;
		width: 234px;
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;
		height: 44px;
	}

	.search-input {
		text-align: center;
		font-size: 16px;
		width: 100%;
	}

	.search-icon {
		padding: 0 14px;
		height: 100%;
		display: flex;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	/deep/ .ivu-modal-mask {
		top: 80px !important;
	}


	/deep/ .search-modal {
		.ivu-modal-content {
			border-radius: 0;
			background-image: url('"~_a/images/drop-bg.png');
			background-repeat: no-repeat;
			background-position: left bottom;
			min-height: 334px;

			.ivu-modal-header {
				padding: 40px 50px;
				background-color: transparent;
				border-bottom: 0;

				.ivu-modal-header-inner {
					font-size: 22px;
					font-weight: 400;
					height: auto;
					line-height: 1.5;
				}
			}

			.ivu-modal-close {
				top: 30px;
				right: 20px;

				.ivu-icon-ios-close {
					font-size: 40px;
				}
			}

			.ivu-modal-body {
				padding: 15px 50px 70px;
			}
		}
	}


	.search-content {
		display: flex;
		padding-left: 120px;

		.search-select {
			width: 130px;
			margin-right: 10px;

			/deep/ .ivu-select {

				.ivu-select-selection {
					background-color: #F68A0C;
					border-color: #F68A0C;
					font-size: 16px;
					height: 50px !important;
					border-radius: 30px;

					.ivu-select-placeholder,
					.ivu-select-selected-value {
						font-size: 16px;
						height: 48px !important;
						line-height: 48px !important;
						padding-left: 22px;
						color: #fff;
					}
				}


				.ivu-select-arrow {
					color: #fff;
				}
			}
		}

		.search-main {
			flex: 1;
			min-width: 0;
		}

		.search-right {
			width: 120px;
			margin-left: 10px;
			padding-top: 13px;

			/deep/ .ivu-checkbox-wrapper {
				font-size: 16px;

				.ivu-checkbox {
					margin-right: 4px;

					.ivu-checkbox-inner {
						width: 20px;
						height: 20px;
						border-radius: 10px;

						&:after {
							width: 6px;
							height: 10px;
							top: 2px;
							left: 6px;
						}
					}
				}
			}
		}
	}



	.search-inner {
		position: relative;
		margin-bottom: 20px;

		/deep/ .ivu-input-type-text {
			.ivu-input {
				background-color: #FFF2E2;
				border-radius: 30px;
				height: 50px !important;
				line-height: 50px !important;
				font-size: 16px;
				width: 100%;
				border: 1px solid #FFF2E2 !important;
				outline: none;
				padding: 0 90px 0 70px;
				display: block;
			}

			.ivu-input::placeholder {
				color: #666;
			}
		}

		.search-prefix {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 70px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
		}

		.search-suffix {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 86px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			font-size: 16px;
			cursor: pointer;
			z-index: 1;
		}
	}


	.search-history {
		display: flex;
	}

	.search-label {
		color: #333333;
		font-size: 16px;
		padding-right: 10px;
		width: 80px;
	}

	.search-key {
		min-width: 0;
	}

	.search-key a {
		color: #333333;
		font-size: 16px;
	}

	.search-key a:hover {
		color: #F68A0C;
	}

	.search-key span {
		color: #333333;
		font-size: 16px;
		margin: 0 10px;
	}
  .user-info {
    padding-left: 15px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer
  }
  .user-info::before {
    position: absolute;
    left: 0;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background-color: #D3D3D3;
  }
</style>
